<template>
  <view class="money-detail-container">
    <e-navbar leftTitle="易币明细"></e-navbar>
    <u-gap height="15"></u-gap>
    <template v-if="moneyDetailList.length === 0">
      <u-gap height="200"></u-gap>
      <u-empty :icon="$image('/images/list-empty.png')" text="暂无明细"></u-empty>
    </template>
    <template v-else>
      <view class="detail-item" v-for="(item, index) in moneyDetailList" :key="index">
        <view class="flex col-center row-between text-333 font-28 pingfang-heavy">
          <view class="flex-1 hidden_one m-r-30">{{item.type_name}}</view>
          <view>{{item.before < item.after ? '+' + item.balance : item.balance }}</view>
        </view>
        <view class="flex col-center row-between text-999 font-24 m-t-12">
					<view>{{$u.timeFormat(item.create_time, 'yyyy-mm-dd hh:MM:ss')}}</view>
          <view>{{item.after || 0}}易币</view>
        </view>
      </view>
      <u-loadmore status="nomore" color="#999"/>
      <u-gap height="15"></u-gap>
    </template>
  </view>
</template>

<script>
	import {balance_list} from "@/common/api";

  let app = getApp();
export default {
  data() {
    return {
      moneyDetailList: [],
			isLoad:false,
			query:{
				page:1,
				page_size:20,
			}
    };
  },
  onLoad() {
    this.getMoneyDetailList();
  },
	onReachBottom() {
		this.getMoneyDetailList();
	},
  methods: {
    async getMoneyDetailList() {
			const res = await this.$api.balance_list();
			if(res.code == 1){
        this.moneyDetailList = res.data.list;
			}
			
      // for (let i = 0; i < 20; i++) {
      //   this.moneyDetailList.push({
      //     title: "明细备注",
      //     money: "-114.58",
      //     time: "2020.25.06 12:24:56",
      //     type: "易币"
      //   });
      // }
    }
  }
}
</script>

<style lang="scss" scoped>
  .money-detail-container{
    .detail-item{
      background: #fff;
      border-radius: 20rpx;
      margin:0 30rpx 16rpx;
      padding: 30rpx;
    }
  }
</style>
